<template>
  <el-table :data="model.getList()" @selection-change="data => select = data" style="width: 100%;" height="70vh" @row-click="row => $emit('form', row)">
    <el-table-column type="selection" width="55" />
    <el-table-column width="150" :label="plugin.lang('form.number')">
      <template #default="scope">
        <el-link type="primary" href="javascript:;">{{ scope.row.number }}</el-link> <br>
        {{ scope.row.code }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('form.menu_id')" prop="menu_id">
      <template #default="scope">
        {{ scope.row.menu ? scope.row.menu.name : '-' }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('form.name')" min-width="150" prop="name">
      <template #default="scope">
        <el-avatar shape="square" v-if="scope.row.image" :size="45" :src="app.img(scope.row.image)" class="goods-image" />
        <div class="goods-name">
          <div class="item wrap">
            {{ scope.row.name }}
          </div>
          <div class="item wrap" v-if="scope.row.sname">
            {{ scope.row.sname }}
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('form.price')" align="center">
      <template #default="scope">
        <el-link type="primary" href="javascript:;">{{ money(scope.row.price) }}</el-link>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('form.price_discount')" align="center">
      <template #default="scope">
        {{ money(scope.row.price_discount) }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('form.price_cost')" align="center">
      <template #default="scope">
        {{ money(scope.row.price_cost) }}
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('form.count')" align="center">
      <template #default="scope">
        <div style="padding: 10px 20px" @click.stop="$emit('count', scope.row)">
          <el-link :type="scope.row.count <= scope.row.count_min ? 'warning' : 'primary'" href="javascript:;">{{ scope.row.count }}</el-link>
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="200">
      <template #default="scope">
        <div style="text-align: right">
          <el-dropdown @command="command => $emit(command, scope.row)" style="margin-right: 10px">
            <el-button type="primary" size="small" @click.stop>{{ lang.t('common.active') }}<i class="iconfont mini icon-arrow-down el-icon--right"></i></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="count">{{ plugin.lang('count.name') }}</el-dropdown-item>
                <el-dropdown-item command="supplier_order">{{ plugin.lang('supplier_order.title') }}</el-dropdown-item>
                <el-dropdown-item command="inbound">{{ plugin.lang('inbound.title') }}</el-dropdown-item>
                <el-dropdown-item command="outbound">{{ plugin.lang('outbound.title') }}</el-dropdown-item>
                <el-dropdown-item command="label">{{ plugin.lang('label.title') }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-popconfirm
            :title="lang.t('alert.delete')"
            @confirm="model.del(scope.row.id)"
            confirmButtonType="danger"
            placement="left"
            hideIcon
          >
            <template #reference>
              <el-button type="danger" size="small" @click.stop>{{ lang.t('common.delete') }}</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
    <KeyCode @add="onPrice" @sub="onPriceDiscount" />
  </el-table>
</template>

<script>
import { ref } from 'vue'
import app from '@/app'
import model from '../../model'

import KeyCode from '@/components/keyCode'

export default {
  components: {
    KeyCode,
  },
  setup() {
    // 选择
    const select = ref([])

    // 键盘助手更新部分
    const update = async(name, value) => {
      // 循环
      for (const key in select.value) {
        // 更新内容
        let row = select.value[key]
        // 更新字段
        row[name] = value
        // 循环更新
        await model.updateName(row)
      }

      model.get()
    }

    // 零售价
    const onPrice = value => {
      update('price', value)
    }

    // 优惠价
    const onPriceDiscount = value => {
      update('price_discount', value)
    }

    return {
      app,
      lang: app.lang,
      money: app.money,
      plugin: app.plugin.index,
      model,
      select,
      onPrice,
      onPriceDiscount
    }
  }
}
</script>